<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邑大校园导游</title>
    <link rel="stylesheet" type="text/css" href="./css./main.css">

    <style>

        #showContent{
            background-color: #cce2ff;
            position: absolute;
            top: 300px;
            left: 32%;
            width: 500px;
            height: 600px;
            overflow: hidden;
           
            
        }

        #showData{
            position: absolute;
            left: 0;
	        top: 0;
	        right: -17px;
	        bottom: 0;
	        overflow-x: hidden;
            overflow-y: scroll;
            padding-left: 30px;
            padding-right: 30px;
        }

        .list_li{
            padding-top: 10px;
            padding-bottom: 10px;
            text-align: center;
        }
        

        .list_li:hover{
            background-color: #eeeeee;
            cursor:pointer;
        }

        .table{
            border-radius:10%;
            background-color: #cce2ff;
            padding-bottom: 15px;
            padding-top: 10px;
        }
    </style>
</head>
<body>

        <div class="header">
            <div class="title"> <img src="./image./p00031257.jpeg" alt="邑大logo" class="logo">  <span> 邑大校园导游</span> </div>
            <ul class="nav">
                <li ><a href="#" id="insertAttractions" >景点添加</a></li>
                <li ><a href="#" id="searchAttractions" >景点查询</a></li>
                <li ><a href="#" id="delete" >景点删除</a></li>
                <li ><a href="#" id="insertPath" >景点间路径输入</a></li>
                <li ><a href="#" id="serchPath" >景点间路径查询</a></li>
            </ul>
            
        </div>

        <div class="content">

            <div class="from">
        
                <div class="container">
            
                    <h3>输入景点信息</h3>
                 
                    <div class="center">
                     <label class="label"> 编号 : </label><input type="number" placeholder="请输入景点编号"  class="input" id="number" /> 
                    </div>
                   
                    <div class="center">
                     <label class="label"> 名称 : </label><input type="text" placeholder="请输入景点名称" class="input" id="name"/> 
                    </div>
                    <div class="center">
                        <textarea name="Introduction" id="introduction" cols="30" rows="10" placeholder="请输入景点简介" ></textarea>
                    </div>
                 
                    <button class="button" id="submit">提交信息</button>
                 
                </div>        
                </div>
                    
            </div>

        </div>

        <div class="content">

            <div class="from">

                <div class="vertical-box">
                    <input type="text" class="input" placeholder="输入要查询的景点" id="searchAattractions"> <button class="search" >搜索</button>
                </div>  
                
                <div id="list">

                </div>
            </div>

            <div id="showContent">
            <div id="showData">  </div>
            </div>
           
        </div>

        <div class="content" >

            <div class="from">

                <div class="vertical-box">
                    <input type="text" class="input" placeholder="输入要删除的景点" id="deleteAattractions"> <button class="delete" >删除</button>
                </div>

            </div>

        </div>
        </div>
        
        <div class="content">

            <div class="from" >

                <div style="display: flex; margin-top: 30px;margin-bottom: 30px;">
                    <div style="flex: 1;">
                    <input type="text" class="input" placeholder="输入景点" list="select1" id="input1" style="height: auto;">
                <datalist id="select1" class="select">  
                  </datalist>
                </div>
                
                    <div  style="flex: 1;">
                   <input type="text" class="input" placeholder="输入景点" list="select2" id="input2" style="height: auto;">
                  <datalist id="select2" class="select">  
                  </datalist> 
                    </div>
                </div>

              <div>
                    <input type="number" placeholder="输入景点间的距离" class="input" id="Path"> &nbsp; <span>M</span>
                  </div>

                  <div style="margin-top: 20px; margin-bottom: 20px;"> 

                    <button class="button" id="submitAction">确定</button>

                  </div>
               
            </div>
            
        </div>

        <div class="content">

            <div class="from">

                <div style="display: flex; margin-top: 30px;margin-bottom: 30px;">
                    <div style="flex: 1;">
                    <input type="text" class="input" placeholder="输入景点" list="select3" id="input3" style="height: auto;">
                <datalist id="select3" class="select">  
                  </datalist>
                </div>           
                    <div  style="flex: 1;">
                   <input type="text" class="input" placeholder="输入景点" list="select4" id="input4" style="height: auto;">
                  <datalist id="select4" class="select">  
                  </datalist> 
                    </div>
                </div>

                
                <!-- <select id="select3" class="select">
                    <option value ="">输入景点</option>
                  </select>

                  <select id="select4" class="select">
                    <option value ="">输入景点</option>     
                  </select> -->

                  <div style="margin-bottom: 20px;">

                    <button class="button" id="searchAction" style="background-color: blue; border: 1px solid blue;">查询</button>

                  </div>
                  
                  <div id="getData"> 
        
                  </div>               
                </div>          
            </div>
        </div>


        <div class="content">

            <div class="from">

        
                <select id="select3" class="select">
                    <option value ="">输入景点</option>
                  </select>

                  <select id="select4" class="select">
                    <option value ="">输入景点</option>     
                  </select>

                  <div style="margin-bottom: 20px;">

                    <button class="button" id="searchAction" style="background-color: blue; border: 1px solid blue;">查询</button>

                  </div>
                  
                  <div id="getData"> 
        
                  </div>               
                  </div>          
            </div>
        </div>
        
        <script src="./js/data.js" ></script>
        <script src="./js/model.js"></script>
        <script  src="./js/view.js"></script>
        <script src="./js/control.js"></script>

        <script>

          let CHART = Chart.init();

           View.toggleFunction(0) // 显示第一个功能的视图

           View.showData()

        </script>   

</body>
</html>